<script setup lang="ts">
import {
  onMounted,
  ref,
  markRaw,
  watch,
  onBeforeUnmount,
  provide,
  shallowRef,
  inject,
  isReactive,
  isRef,
  isReadonly,
  readonly,
  getCurrentInstance
} from "vue";
import { createNode, generateLayoutTree } from "@/utils/calculate.ts";
// 注入上层组件提供的yoga对象
const yoga = inject("yoga", null);
const node = shallowRef(null);
const props = withDefaults(
  defineProps<{
    _isRoot: boolean,
    width?: number;
    height?: number;
  }>(),
  {
    _isRoot: false,
    id:'',
    width: 500,
    height: 500
  }
);
onMounted(() => {
  if (yoga) {
    node.value = createNode(yoga.value, {
      width: props.width,
      height: props.height
    });
  }
  

  // 初次画完，先布局一次
  if(props._isRoot){
    node.value.node.calculateLayout();

  }

});

const parent = getCurrentInstance()?.parent
console.log("parent===", parent);

</script>

<template>
  <div>子组件</div>
  <slot />
</template>
